<template>
  <div class="unclassified">
    <Row>
      <i-col span="4">
        <br/>
        <Badge text="分类">
          <i-select v-model="sort" filterable>
            <Option v-for="item in categoriesList" :value="item.name" :key="item.id">{{ item.name }}</Option>
          </i-select>
        </Badge>
        <br/><br/>
        <br/>
        <Badge text="标签">
          <i-select v-model="tags" filterable multiple>
            <Option v-for="item in tagsList" :value="item.name" :key="item.id">{{ item.name }}</Option>
          </i-select>
        </Badge>
        <br/><br/><br/><br/>
        <div style="text-align: center">
          <ButtonGroup shape="circle">
            <Button @click="reset" type="primary">
              <Icon type="ios-arrow-back"></Icon>
              重置
            </Button>
            <Button @click="confirmSort" type="primary">
              确认分类
              <Icon type="ios-arrow-forward"></Icon>
            </Button>
          </ButtonGroup>

        </div>
      </i-col>
      <i-col span="20">
        <div class="head">
          <Card>
            <h3 slot="title" v-if="sort === '' ">分类</h3>
            <h3 slot="title" v-else>{{sort}}</h3>
            <Tag v-if="tags.length === 0" :color="$store.state.color[(Math.floor((Math.random()*10)+1))%7]">标签</Tag>
            <Tag v-else v-for="(item, index) in tags" :key="index" :color="$store.state.color[index%7]">{{item}}</Tag>
          </Card>
        </div>
        <Divider orientation="left">将右边文章拖拽到<Icon type="md-arrow-down" />进行分类</Divider>
        <Row :gutter="16">
          <i-col span="12" style="border: 1px dashed white">
            <div id="left" class="container">
              <draggable element="span" v-model="classified" :options="dragOptions" >
                <transition-group class="list-group" tag="div">
                  <div class="list-group-item" v-for="element in classified" :key="element.id">
                    <Card>
                      <h3 class="title" slot="title">{{element.title}}</h3>
                      <p>{{element .description}}</p>
                    </Card>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </i-col>
          <i-col span="12" >
            <div id="right"  class="container">
              <draggable class="list-group" v-model="unclassified" :options="dragOptions">
                <transition-group type="transition" tag="div">
                  <div class="list-group-item" v-for="element  in unclassified" :key="element.id">
                    <Card>
                      <h3 class="title" slot="title">{{element .title}}</h3>
                      <p>{{element .description}}</p>
                    </Card>
                  </div>
                </transition-group>
              </draggable>

            </div>
          </i-col>
        </Row>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import {allCategories, allTags, listArticleCategoryIsNull, addArticleCategoryAndTags} from "@/network/classification";

  export default {
    name: "Unclassified",
    data() {
      return {
        //分类
        categoriesList: [],
        //标签
        tagsList: [],
        sort: '',
        tags: [],
        articles: [],
        unclassified: [],
        classified: []
      }
    },
    components: {
      draggable
    },
    computed: {
      dragOptions() {
        return {
          //动画时间
          animation: 0,
          //分组用的，同一组的不同list可以相互拖动
          group: "description",
          disabled: false,
          ghostClass: "ghost"
        };
      }
    },
    mounted() {
      //获取全部分类
      this.allCategories();
      //获取全部标签
      this.allTags();
      //获取文章中分类为空的文章
      this.listArticleCategoryIsNull();
    },
    methods: {
      //重置
      reset() {
        this.classified = [];
        this.unclassified = this.articles;
        this.sort = '';
        this.tags = [];
      },
      //确认分类
      confirmSort() {
        if(this.sort === undefined || this.sort === '') {
          this.$Message['error']({
            background: true,
            content: '分类必须选择！'
          });
          return;
        }
        if(this.tags.length === 0) {
          this.$Message['error']({
            background: true,
            content: '标签必须选择！'
          });
          return;
        }
        if(this.classified.length === 0) {
          this.$Message['error']({
            background: true,
            content: '文章不能为空！'
          });
          return;
        }

        //选中标签的id
        let tagsId = [];
        for(let tag of this.tags) {
          //将标签的名字转为id
          let index = this.tagsList.findIndex(item =>item.name === tag);
          tagsId.push(this.tagsList[index].id);
        }
        //将选中的分类转为id
        let categoryIndex = this.categoriesList.findIndex(item =>item.name === this.sort);
        let categoryId = this.categoriesList[categoryIndex].id;

        //获取分类的文章的id
        let articleId = [];
        for(let article of this.classified) {
          articleId.push(article.id);
        }

        addArticleCategoryAndTags(categoryId, tagsId, articleId).then(res => {
          if(res.code === 2000) {
            //重置属性
            this.sort = '';
            this.tags = []
            this.classified = [];
            this.$Message.success('成功！');
          }
        })
      },
      //获取全部分类
      allCategories() {
        allCategories().then( res=> {
          if(res.code === 2000) {
            this.categoriesList = res.data.categoriesList;
          }
        })
      },
      allTags() {
        allTags().then(res => {
          if(res.code === 2000) {
            this.tagsList = res.data.tagsList;
          }
        })
      },
      //获取文章中分类为空的文章
      listArticleCategoryIsNull() {
        listArticleCategoryIsNull().then(res => {
          this.articles = res.data.articleList;
          this.unclassified = res.data.articleList;
        })
      }
    },
    watch: {
      isDragging(newValue) {
        if (newValue) {
          this.delayedDragging = true;
          return;
        }
        this.$nextTick(() => {
          this.delayedDragging = false;
        });
      }
    }
  }
</script>


<style scoped>
  .head {
    text-align: center;
  }
  .title {
    text-align: center;
  }
  .container {
    -o-user-select: none;
    -moz-user-select: none; /*火狐 firefox*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10+*/
    -khtml-user-select :none; /*早期的浏览器*/
    user-select: none;
  }
</style>